<template>
	<view class="content">
		<!-- 书籍详情页面 -->
		<view class="book-list u-skeleton">
			<view class="book-list-item wrap-item">
				<image :src="book.cover_url" class="u-skeleton-rect"></image>
				<view class="book-list-title  u-skeleton-rect">
					{{book.title}}
				</view>
				<view class="book-list-item-price">
					<view class="price u-skeleton-rect">￥{{book.price}}</view>
					<view class="salce u-skeleton-rect"> 已销售{{book.sales}}</view>
				</view>
			</view>
		</view>
		<!-- 选项卡组件 -->
		<sub-section :section="sectionBar" class="sectionCar" @sectionIndex="tabBarIndex"></sub-section>
		<!-- 商品详情富文本组件 -->
		<parase v-show="paraseShow" :details="details" class="wrap"></parase>
		<!-- 导入评论组件 -->
		<comment v-show="commentShow" :comment="comment" class="wrap"></comment>
		<!-- 导入商品列表组件 -->
		<book-list v-show="bookListShow" :bookList="bookList" class="wrap"></book-list>
		<!-- 导入empty空页面组件 -->
		<!-- <empty v-show="emptyShow" :mode="modeData" :textarea="textarea"></empty> -->
		<!-- 提交订单组件 -->
		<submit-bar class="submitBar" :bookId="bookId" :bookIds="bookIds" :carNum='carNum'></submit-bar>
		<!-- 骨架屏组件 -->
		<u-skeleton :loading="show" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	// 导入数据信息组件
	import bookList from '../../commponts/bookList.vue'
	// 导入选项卡组件
	import subSection from '../../commponts/subSection.vue'
	// 导入提交订单组件
	import submitBar from '../../commponts/submitBar.vue'
	// 导入商品详情富文本组件
	import parase from '../../commponts/parase.vue'
	// 导入评论组件
	import comment from '../../commponts/comment.vue'
	// 当页面没有内容时,应该提示用户内容为空，即导入empty组件
	// import empty from '../../commponts/empty.vue'
	// 导入eventBus
	import {
		eventBus
	} from '../../main.js'
	export default {
		components: {
			bookList,
			subSection,
			submitBar,
			parase,
			comment,
		},
		data() {
			return {
				// 控制tabbar选项卡组件
				paraseShow: true,
				bookListShow: false,
				commentShow: false,
				// 选项卡数据
				sectionBar: ['商品详情', '商品评论', '推荐商品'],
				// 商品id
				bookId: 0,
				book: [],
				likeBook: '',
				tabIndex: 0,
				// 评论
				comment: [],
				// 描述
				details: '',
				// 推荐商品
				bookList: [],
				// 控制empty空白组件
				emptyShow: false,
				// 空白组件的模式
				// mode:['car','page','search'],
				modeData: '',
				// 空白组件的文本标题
				textarea: '',
				//控制骨架屏
				show: false,
				// 书籍id
				bookId: '',
				bookIds:[],
				carNum:''
			}
		},
		methods: {

			// 获取商品的详细信息
			async getdata() {
				this.show = true
				await this.$u.get('/api/goods/' + this.bookId).then(res => {
					// 书籍详情
					console.log(res.data)
					this.bookId = res.data.goods.id
					this.book = res.data.goods || [];
					this.show = false
					this.comment = res.data.goods.comments || [];
					this.details = res.data.goods.details || [];
					// 推荐书籍
					this.bookList = res.data.like_goods || [];
				}).catch(err => {
					console.log(err)
				})
			},
			tabBarIndex(res) {
				console.log(res)
				this.tabIndex = res;
				// 修改部分开始
				if (this.tabIndex == 0) {
					this.paraseShow = true
				} else if (this.tabIndex == 1) {
					this.commentShow = true;
					this.paraseShow = false;
					this.bookListShow = false;
				} else {
					this.bookListShow = true;
					this.paraseShow = false;
					this.commentShow = false;
				};
				if (this.comment === []) {
					
				} else if (this.details === []) {
					
				} else {
					
				}
				// 修改部分结束
			},
		    async getCarNum(){
				await this.$u.get('/api/carts').then(res=>{
					console.log(res.data.data.length);
					this.carNum=res.data.data.length
					// 取到购物车商品的id,进一步的去请求商品的详细信息
				}).catch(err=>{
					console.log(err)
				})
			}	
		},
		async onLoad() {
			this.getCarNum()
			uni.$on('transmitId', res => {
				this.bookId = res;
				this.getdata();
			})
			uni.$emit('send')
			// 假如用户已经登陆,对于已经收藏的商品信息,收藏图标应该对应图标
			// const token = this.vuex_token
			// // 当已经处于登陆状态时
			// if (token) {
			// 	await this.$u.get('/api/collects').then(res => {
			// 		console.log(res)
			// 		this.getBookIds(res.data.data)
			// 		// if(this.bookId===)
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// }

		},
		// 保证页面刷新时,依然能获取到书籍数据
		created() {
			this.bookId = uni.getStorageSync("bookId");
			this.getdata()
		},
		onUnload() {
			uni.$off('transmitId')
			uni.$off('send')
		}
	}
</script>

<style lang="scss" scoped>
	.wrap-item {
		padding: 40rpx !important;
		width: 100%;
	}

	.book-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.book-list-item {
			width: 100%;
			height: 300px;
			margin-bottom: 30px;
		}
	}

	image {
		width: 100%;
		height: 100%;
	}

	.book-list-item-price {
		display: flex;
		justify-content: space-between;

		.price {
			color: red;
			width: 30%;
		}

		.salce {
			color: #C0C0C0;
			width: 50%;
			text-align: right;
		}
	}

	.book-list-title {
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 20rpx 0 20rpx 0;
		white-space: nowrap;
	}

	.wrap-section {
		margin-top: 30px;
	}

	uni-view {
		z-index: 100 !important;
	}

	.submitBar {
		position: fixed;
		padding: 0 !important;
		width: 100%;
		left: 0;
		bottom: 0rpx;
		z-index: 9999;
	}

	.sectionCar {
		margin: 40rpx !important;
	}

	.wrap {
		padding: 40rpx;
	}

	.content {
		padding-bottom: 40rpx;
	}
</style>
